<template>
    <view class="header">
        <image class="img-title" src="../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('information.financial.formName') }}</view>
    </view>
    <view class="main">
        <view class="form">
            <view class="realname form-item">
                <input class="realname-input" v-model="form.realname" disabled type="text">
                <text class="label">{{ $t('information.financial.formName') }}</text>
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.account" disabled type="text">
                <text class="label">{{ $t('information.account') }}</text>
            </view>
            <view class="private form-item" @click="routerPush('/pages/private/private')">
                <image class="right" src="../../static/icon/right.png" mode="" />
                <text class="label">{{ $t('information.private') }}</text>
            </view>
        </view>
        <!-- 退出登录 -->
        <view class="logout" @click="submit()">
            {{ $t('information.logout') }}
        </view>
    </view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import { requestApi } from '@/api';
import { toast } from '@/utils/storage';
const _this = getCurrentInstance().appContext.config.globalProperties
function routerPush(url) {
    uni.navigateTo({ url })
}

async function getUserMoney() {
    const { status, data, code } = await requestApi.getUserMoney()
    if (code && code == 401) {
        uni.navigateTo({
            url: '/pages/login/login'
        });
    } else {
        status == 0 && getUserInfo(data)
    }
}

function getUserInfo(data) {
    form.realname = data.nikeName
    form.account = data.phone
    // uni.reLaunch({
    //     url: '/pages/login/login'
    // });
}
const form = reactive({
    realname: '',
    account: ''
})
const submit = async () => {
    const { status, data, msg } = await requestApi.logout()
    if (status == 0) {
        toast(msg, 'success')
    }
}



// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}
onLoad(() => {
    getUserMoney()
})
</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
    // #ifndef H5
    margin-top: 88rpx;
    // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 99;
    top: 0rpx;
    background-color: #191A22;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    margin: 59rpx 44rpx 0rpx 40rpx;

    margin-top: 147rpx;
    // #ifndef H5
    margin-top: calc(88rpx + 88rpx + 59rpx);

    // #endif
    .form {

        .form-item {
            background-color: #20212A;
            position: relative;
            margin-bottom: 49rpx;
            height: 90rpx;
            border-radius: 28rpx;
            display: flex;

            input {
                height: 100%;
                padding-left: 204rpx;
                color: #c7c7c7;
            }

            .label {
                color: #fff;
                position: absolute;
                top: 50%;
                left: 24rpx;
                transform: translateY(-50%);
            }

            .right {
                width: 15rpx;
                height: 26rpx;
                margin: auto 30rpx auto auto;
            }
        }

        // .realname {}
    }

    .logout {
        background-color: #2D7DFC;
        width: 500rpx;
        height: 96rpx;
        margin: 69rpx auto 73rpx;
        line-height: 96rpx;
        text-align: center;
        border-radius: 204rpx;
        color: #fff;
        letter-spacing: 2rpx;
    }
}

.toast {
    background-color: #292A36;
    width: 304rpx;
    height: 304rpx;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-res {
        margin-top: 40rpx;
        width: 101rpx;
        height: 101rpx;
    }

    .result {
        margin-top: 14rpx;
    }

    .view-card {
        display: flex;
        align-items: center;

        view {
            margin-top: 30rpx;
            color: #4A80FF;
        }

        image {
            width: 8rpx;
            margin-top: 30rpx;
            margin-left: 8rpx;
            height: 14rpx;

        }
    }
}

.text-grey {
    color: #c7c7c7 !important;
}
</style>